<template>
  <div class="svg-3d">
    <!-- 遍历所有数据类别 -->
    <template v-for="(category, categoryName) in data" :key="categoryName">
      <!-- 每个类别容器 -->
      <div :class="categoryName" class="data-container">
        <!-- 遍历类别中的每个数据项 -->
        <template v-for="(value, itemName) in category" :key="itemName">
          <div :class="itemName">
            {{
              randomValues[categoryName]?.[itemName] || getRandomInRange(value)
            }}
          </div>
          <!-- <div :class="itemName">{{ 99.99 }}</div> -->
        </template>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { getRandomInRange } from "@/utils/useTemperature";
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
// 存储随机值的响应式对象
const randomValues = ref({});

// 初始化随机值对象结构
const initRandomValues = () => {
  randomValues.value = {};
  Object.keys(props.data).forEach((category) => {
    randomValues.value[category] = {};
    Object.keys(props.data[category]).forEach((item) => {
      randomValues.value[category][item] = getRandomInRange(
        props.data[category][item]
      );
    });
  });
};

// 更新所有随机值
const updateRandomValues = () => {
  Object.keys(props.data).forEach((category) => {
    Object.keys(props.data[category]).forEach((item) => {
      randomValues.value[category][item] = getRandomInRange(
        props.data[category][item]
      );
    });
  });
};

let intervalId = null;

// 组件挂载时启动定时器
onMounted(() => {
  initRandomValues();
  intervalId = setInterval(updateRandomValues, 6 * 1000); // 每分钟(60秒×1000毫秒)
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>
<style scoped lang="scss">
.svg-3d {
  position: relative;
  color: #fff;
  width: 1920px;
  height: 100%;
  background: url("@/assets/ljwk.png") no-repeat center center;
  font-family: "钉钉进步体 Regular";
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0px;
  &.small {
    font-size: 20px;
    line-height: 1;
  }
  .bwlq {
    $bwlq_left: 160px;
    $bwlq_top: 658px;
    position: relative;

    .bwlq_1,
    .bwlq_2,
    .bwlq_3,
    .bwlq_4,
    .bwlq_5,
    .bwlq_6,
    .bwlq_7,
    .bwlq_8 {
      position: absolute;
      transform-origin: center center;
    }
    .bwlq_1 {
      left: $bwlq_left;
      top: $bwlq_top;
      transform: rotate(-46deg);
    }

    .bwlq_2 {
      left: $bwlq_left + 60;
      top: $bwlq_top - 62;
      transform: rotate(-42deg);
    }

    .bwlq_3 {
      left: $bwlq_left + 124;
      top: $bwlq_top - 118px;
      transform: rotate(-38deg);
    }

    .bwlq_4 {
      left: $bwlq_left + 186;
      top: $bwlq_top - 162px;
      transform: rotate(-34deg);
    }

    .bwlq_5 {
      left: $bwlq_left + 170px;
      top: $bwlq_top + 98px;
      transform: rotate(-48deg);
    }

    .bwlq_6 {
      left: $bwlq_left + 218px;
      top: $bwlq_top + 48px;
      transform: rotate(-42deg);
    }

    .bwlq_7 {
      left: $bwlq_left + 273px;
      top: $bwlq_top + 1px;
      transform: rotate(-38deg);
    }

    .bwlq_8 {
      left: $bwlq_left + 330px;
      top: $bwlq_top - 42px;
      transform: rotate(-36deg);
    }
  }

  .bs {
    position: relative;
    $bs_left: 478px;
    $bs_top: 418px;

    .bs_1,
    .bs_2,
    .bs_3,
    .bs_4,
    .bs_5,
    .bs_6,
    .bs_7,
    .bs_8 {
      position: absolute;
      transform-origin: center center;
    }
    .bs_1 {
      transform: rotate(-28deg); /* 调整为你需要的角度 */

      left: $bs_left; /* 调整为你需要的位置 */
      top: $bs_top;
    }

    .bs_2 {
      transform: rotate(-22deg); /* 调整为你需要的角度 */

      left: $bs_left + 70px; /* 调整为你需要的位置 */
      top: $bs_top - 32px;
    }

    .bs_3 {
      transform: rotate(-18deg); /* 调整为你需要的角度 */

      left: $bs_left + 142px; /* 调整为你需要的位置 */
      top: $bs_top - 58px;
    }

    .bs_4 {
      transform: rotate(-14deg); /* 调整为你需要的角度 */

      left: $bs_left + 220px; /* 调整为你需要的位置 */
      top: $bs_top - 80px;
    }

    .bs_5 {
      transform: rotate(-26deg); /* 调整为你需要的角度 */

      left: $bs_left + 82px; /* 调整为你需要的位置 */
      top: $bs_top + 152px;
    }

    .bs_6 {
      transform: rotate(-22deg); /* 调整为你需要的角度 */

      left: $bs_left + 145px; /* 调整为你需要的位置 */
      top: $bs_top + 125px;
    }

    .bs_7 {
      transform: rotate(-18deg); /* 调整为你需要的角度 */

      left: $bs_left + 210px; /* 调整为你需要的位置 */
      top: $bs_top + 101px;
    }

    .bs_8 {
      transform: rotate(-12deg);
      left: $bs_left + 285px; /* 调整为你需要的位置 */
      top: $bs_top + 83px;
    }
  }

  .yr {
    $yr_left: 856px;
    $yr_top: 310px;
    position: relative;
    .yr_1,
    .yr_2,
    .yr_3,
    .yr_4,
    .yr_5,
    .yr_6,
    .yr_7,
    .yr_8 {
      position: absolute;
      transform-origin: center center;
    }
    .yr_1 {
      left: $yr_left;
      top: $yr_top;
      transform: rotate(-5deg);
    }

    .yr_2 {
      left: $yr_left + 77px;
      top: $yr_top - 4px;
      transform: rotate(1deg);
    }

    .yr_3 {
      left: $yr_left + 157px;
      top: $yr_top + 4px;
      transform: rotate(9deg);
    }

    .yr_4 {
      left: $yr_left + 237px;
      top: $yr_top + 21px;
      transform: rotate(13deg);
    }

    .yr_5 {
      left: $yr_left + 12px;
      top: $yr_top + 176px;
      transform: rotate(-4deg);
    }

    .yr_6 {
      left: $yr_left + 86px;
      top: $yr_top + 175px;
      transform: rotate(1deg);
    }

    .yr_7 {
      left: $yr_left + 156px;
      top: $yr_top + 180px;
      transform: rotate(7deg);
    }

    .yr_8 {
      left: $yr_left + 228px;
      top: $yr_top + 192px;
      transform: rotate(10deg);
    }
  }

  .hgpc {
    position: relative;
    $hgpc_left: 1292px;
    $hgpc_top: 388px;

    .hgpc_1,
    .hgpc_2,
    .hgpc_3,
    .hgpc_4,
    .hgpc_5,
    .hgpc_6,
    .hgpc_7,
    .hgpc_8 {
      position: absolute;
      transform-origin: center center;
    }
    .hgpc_1 {
      left: $hgpc_left;
      top: $hgpc_top;
      transform: rotate(20deg);
    }

    .hgpc_2 {
      left: $hgpc_left + 72px;
      top: $hgpc_top + 30px;
      transform: rotate(25deg);
    }

    .hgpc_3 {
      left: $hgpc_left + 144px;
      top: $hgpc_top + 68px;
      transform: rotate(30deg);
    }

    .hgpc_4 {
      left: $hgpc_left + 212px;
      top: $hgpc_top + 110px;
      transform: rotate(32deg);
    }

    .hgpc_5 {
      left: $hgpc_left - 82px;
      top: $hgpc_top + 173px;
      transform: rotate(25deg);
    }

    .hgpc_6 {
      left: $hgpc_left - 14px;
      top: $hgpc_top + 210px;
      transform: rotate(28deg);
    }

    .hgpc_7 {
      left: $hgpc_left + 52px;
      top: $hgpc_top + 247px;
      transform: rotate(32deg);
    }

    .hgpc_8 {
      left: $hgpc_left + 115px;
      top: $hgpc_top + 292px;
      transform: rotate(40deg);
    }
  }
}
</style>
